<script>

export default {
  name: "r-input",
  props: {
    // 输入框的值
    value: {
      type: [String, Number],
      default: ''
    },
    // 占位符文本
    placeholder: {
      type: String,
      default: '请输入'
    },
    // 输入框样式
    inputStyle: {
      type: Object,
      default: () => ({})
    },
    // 占位符样式
    placeholderStyle: {
      type: Object,
      default: () => ({})
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: '#F6F6F6'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 最大长度
    maxlength: {
      type: [String, Number],
      default: 140
    },
    // 最小长度
    minlength: {
      type: [String, Number],
      default: 1
    },
    // 输入类型
    type: {
      type: String,
      default: 'text'
    },
  },
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    onInput(e) {
      const value = e.detail.value
      this.inputValue = value
      this.$emit('input', value)
      this.$emit('change', value)
    },
    onFocus(e) {
      this.$emit('focus', e)
    },
    onBlur(e) {
      this.$emit('blur', e)
    }
  }
}
</script>

<template>
  <view class="r-input-box" :style="{ backgroundColor: bgColor }">
    <input
        class="r-input"
        :value="value"
        :type="type"
        :disabled="disabled"
        :maxlength="maxlength"
        :minlength="minlength"
        @input="onInput"
        @focus="onFocus"
        @blur="onBlur"
        :style="inputStyle"
    />
    <text
        v-if="!value&&!inputValue"
        class="r-placeholder"
        :style="placeholderStyle"
    >
      {{ placeholder }}
    </text>
  </view>
</template>

<style scoped lang="scss">
.r-input-box {
  position: relative;
  width: 100%;
  border-radius: 8rpx;

  .r-input {
    height: 80rpx;
    background: #f5f5f5;
    border-radius: 12rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    width: 100%;
    color: #333;
    box-sizing: border-box;

    &[disabled] {
      opacity: 0.6;
    }
  }

  .r-placeholder {
    position: absolute;
    left: 24rpx;
    right: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28rpx;
    color: #999;
    pointer-events: none;
  }
}
</style>